<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
  用户名:<input type="text" v-model="message_name" placeholder="请输入用户名"/><br/>
  密码:<input type="password" v-model="message_mima" placeholder="请输入密码"/><br/>
  确认密码:<input type="password" v-model="message_mima2" placeholder="请输入密码"/><br/>
  昵称:<input type="text" v-model="message_nickname" placeholder="请输入昵称"/><br/>
  性别:<input type="radio" v-model="message_sex" value="男"/>男
  <input type="radio" v-model="message_sex" value="女"/>女<br/>



  所属城市:
  <select v-model="message_city">
    <option v-for="(item, index) in all" :key="index" :value="index">
      {{item.name}}
    </option>
  </select>
  <select v-model="message_city2">
    <option v-for="(item, index) in all[message_city]?.city || []" :key="index" :value="index">
      {{item.name}}
    </option>
  </select>
  <select v-model="message_city3">
    <option v-for="(item, index) in all[message_city]?.city[message_city2]?.districtAndCounty || []" :key="index" :value="item">
      {{item}}
    </option>
  </select>
  <br/>


  
  兴趣爱好:
  <input type="checkbox" v-model="message_hobby" value="篮球"/>篮球
  <input type="checkbox" v-model="message_hobby" value="足球"/>足球
  <input type="checkbox" v-model="message_hobby" value="羽毛球"/>羽毛球
  <input type="checkbox" v-model="message_hobby" value="乒乓球"/>乒乓球<br/>
  <button @click="login()">登录</button>
  <button @click="logon()">取消</button>
  <div v-show="is">
    <p>用户名:{{message_name}}</p>
    <p>密码:{{message_mima}}</p>
    <p>昵称:{{message_nickname}}</p>
    <p>性别:{{message_sex}}</p>
    <p>所属城市:{{all[message_city]?.name}} - {{all[message_city]?.city[message_city2]?.name}} - {{message_city3}}</p>
    <p>兴趣爱好:{{hobbiesDisplay}}</p>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      message_name: "",
      message_mima: "",
      message_mima2: "",
      message_nickname: "",
      message_sex: "",
      message_city: '',
      message_city2: '',
      message_city3: "",
      message_hobby: [],
      is: false,
      all: [
        {
          name: "河北省",
          city: [
            {
              name: "石家庄市",
              districtAndCounty: [
                "长安区",
                "桥东区",
                "桥西区",
                "新华区",
                "裕华区",
              ],
            },
            {
              name: "张家口市",
              districtAndCounty: [
                "桥西区",
                "桥东区",
                "宣化区",
                "下花园区",
                "宣化县",
                "张家口市宣化区",
              ],
            },
            {
              name: "承德市",
              districtAndCounty: [
                "双桥区",
                "双滦区",
                "鹰手营子矿区",
                "承德县",
                "下板城镇",
                "兴隆县",
                "兴隆镇",
              ],
            },
            {
              name: "秦皇岛市",
              districtAndCounty: [
                "海港区",
                "山海关区",
                "北戴河区",
                "昌黎县",
                "昌黎镇",
                "抚宁县",
                "抚宁镇",
                "卢龙县",
              ],
            },
          ],
        },
        {
          name: "山西省",
          city: [
            {
              name: "太原市",
              districtAndCounty: [
                "杏花岭区",
                "小店区",
                "迎泽区",
                "尖草坪区",
                "万柏林区",
                "晋源区",
                "古交市",
                "清徐县",
              ],
            },
            {
              name: "朔州市",
              districtAndCounty: [
                "朔城区",
                "平鲁区",
                "山阴县",
                "岱岳乡",
                "应县",
                "金城镇",
                "右玉县",
                "新城镇",
                "怀仁县",
                "云中镇",
              ],
            },
            {
              name: "大同市",
              districtAndCounty: [
                "城区",
                "矿区",
                "南郊区",
                "新荣区",
                "阳高县",
                "龙泉镇",
                "天镇县",
                "玉泉镇",
                "广灵县",
              ],
            },
            {
              name: "阳泉市",
              districtAndCounty: [
                "城区",
                "矿区",
                "郊区",
                "平定县",
                "冠山镇",
                "盂县",
                "秀水镇",
              ],
            },
          ],
        },
      ],
    },
    computed: {
      hobbiesDisplay() {
        return this.message_hobby.join(",");
      },
    },
    methods: {
      login() {
        if (
          this.message_name &&
          this.message_mima &&
          this.message_mima2 &&
          this.message_nickname &&
          this.message_sex &&
          this.message_city3 &&
          this.message_hobby.length > 0 &&
          this.message_mima === this.message_mima2
        ) {
          this.is = true;
        } else {
          alert("请填写所有必填字段并确保密码一致");
        }
      },
      logon() {
        this.is = false;
        this.message_name = "";
        this.message_mima = "";
        this.message_mima2 = "";
        this.message_nickname = "";
        this.message_sex = "";
        this.message_city = 0;
        this.message_city2 = 0;
        this.message_city3 = "";
        this.message_hobby = [];
      },
    },
  });
</script>